<!-- 个人中心页面 -->
<template>
  <div class="person-view">
    <!-- 导航栏（可选） -->
    <nav-bar :activeComponent="activeComponent" @updateUserInfo="handleUserInfoUpdate"></nav-bar>
    <el-button @click="checkAuth">登陆检查</el-button>

    <!-- 个人中心主体区域 -->
    <div class="person-container">
      <!-- 左侧菜单 -->
      <div class="sidebar">
        <ul>
          <li :class="{ active: activeComponent === 'info' }" @click="activeComponent = 'info'">
            个人信息
          </li>
          <li :class="{ active: activeComponent === 'posts' }" @click="activeComponent = 'posts'">
            我的帖子
          </li>
          <li :class="{ active: activeComponent === 'favorites' }" @click="activeComponent = 'favorites'">
            我的收藏
          </li>
          <li :class="{ active: activeComponent === 'settings' }" @click="activeComponent = 'settings'">
            账号设置
          </li>
        </ul>
      </div>
      <!-- 右侧内容区 -->
      <div class="content">
        <!-- 个人信息 -->
        <div v-if="activeComponent === 'info'">
       <infoView :userInfo="user" @updateUserInfo="handleUpdateUserInfo"></infoView>
        </div>
        <!-- 我的帖子 -->
        <div v-if="activeComponent === 'posts'">
         <ArticleView></ArticleView>
        </div>
        <!-- 我的收藏 -->
        <div v-if="activeComponent === 'favorites'">
         <FavoriteView></FavoriteView>
        </div>
        <!-- 账号设置 -->
        <div v-if="activeComponent === 'settings'" class="account-settings">
        <EditView :user="user"></EditView>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import infoView from "@/components/Person/Info.vue";
import ArticleView from "@/components/Person/Article.vue";
import FavoriteView from "@/components/Person/FavoriteView.vue";
import EditView from "@/components/Person/EditPerson.vue";
import { ref, reactive, computed ,onMounted} from 'vue'
import { useRoute, useRouter } from 'vue-router'

import { InfoFilled, Edit, Delete } from '@element-plus/icons-vue'
import store from "@/store";
export default {
  name: "PersonView",
  components: { NavBar,infoView,ArticleView,FavoriteView,EditView},
  computed:{
    isLoggedIn() {
      return this.$store.getters.isLoggedIn
    }
  },
  setup() {
    // 当前激活的功能页面
   const activeComponent = ref("info")
  const router = useRouter()
  const route = useRoute()
  const deletedata= reactive({})
  const total = ref(0)
  const user =ref({
       
        person: {
          birthday: '',
          signature: '',
          gender: '',
          email: 'example@example.com',
          phone: '12345678901',
        },
        password: {
          old: '',
          new: ''
        },
        exp: 3498,      // 当前经验值
        nextExp: 99999, // 下一等级所需经验
        coin: 574.4,    // 硬币数量
     
        bio: '这里是个人简介，介绍一下自己。'
      })
  
        const handleUserInfoUpdate = (updatedUserInfo) => {
          console.log(`更新:`, updatedUserInfo);
      Object.assign(user.value, {
        userId:updatedUserInfo.userId,
    userName:updatedUserInfo.userName,
    avatar: updatedUserInfo.avatar,
    exp: updatedUserInfo.exp,
    coin: updatedUserInfo.coin,
    bio: updatedUserInfo.bio,
    level: updatedUserInfo.level,
    password:{
      old: updatedUserInfo.password
      
    },
    person: {
      ...user.value.person,
      birthday: updatedUserInfo.birthday,
      signature: updatedUserInfo.bio, // 假设 `signature` 对应 `bio`
      gender: updatedUserInfo.gender,
      email: updatedUserInfo.email,
      phone: updatedUserInfo.phone,
    }
  });

};
// 处理子组件的 `updateUserInfo` 事件
const handleUpdateUserInfo = (settings) => {
     console.log(`ttttttttttt`, settings);
  activeComponent.value=settings// 合并新数据
};
    const checkAuth=()=> {
      const isLoggedIn = computed(() => store.getters.isLoggedIn);
      if(isLoggedIn.value)
        alert(isLoggedIn)
      else
        alert("null")
    }

    return {
      activeComponent,
      handleUserInfoUpdate,
      checkAuth,
      user,
      handleUpdateUserInfo
    }
  }
}
</script>

<style scoped>
/* ======= 整体页面背景和字体 ======= */
.person-view {
  font-family: 'Noto Sans SC', sans-serif;
  background-color: #f9f9f9;
  color: #333;
  min-height: 100vh;
}

/* ======= 个人中心主体区域，左右布局 ======= */
.person-container {
  display: flex;
  max-width: 1200px;
  margin: 20px auto;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  overflow: hidden;
}

/* ======= 左侧菜单 ======= */
.sidebar {
  width: 200px;
  border-right: 1px solid #eaeaea;
  background-color: #f7f7f7;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.sidebar li:hover {
  background-color: #e0e0e0;
}

.sidebar li.active {
  background-color: #00a1d6;
  color: #fff;
}

/* ======= 右侧内容区 ======= */
.content {
  flex: 1;
  padding: 16px;
}

/*这是信息修改界面的css*/
/* General styles for the form */
.account-settings {
  max-width: 600px;
  margin: 30px auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Title styling */
.account-settings h2 {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
}


</style>
